<template>
  <div class="app-container">
      <h4>请选择维度</h4>
      <el-tree class="dimension"  node-key="id" ref="tree" :data="dimensionList" :props="{label:'dimensionName', children: 'children', hasChildren: 'hasChildren'}"  show-checkbox @check-change="handleCheckChange"></el-tree>
      <el-button type="primary" @click='choseDimension'>确认</el-button>

  </div>
</template>

<script>
  import {
    listDimension,
    getDimension,
  } from '@/api/metadata/dimension'

  export default {
    name: 'dimension',
    data() {
      return {
        dimensions: [],
        // 维度表格数据
        dimensionList: [],
        queryParams: {
          current: 1,
          size: 10000,
          id: undefined,
          dimensionName: undefined,
          dimensionCode: undefined,
          upperId: undefined,
          dimensionType: undefined,
          dimensionAttr: undefined,
          status: undefined,
          activeYear: undefined,
          likes: undefined
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      //清空树
      resetTree(){
        this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])});
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true
        listDimension(this.queryParams).then(response => {
          this.dimensionList = this.handleTree(response.data.records, 'id', 'upperId');
          // resolve = response.data.records;
          // this.total = response.data.total
          this.loading = false
        })
      },
     //选中维度事件
     
     handleCheckChange(){
       this.dimensions = this.$refs.tree.getCheckedNodes(false,true)
     
    },
    choseDimension() {
        this.$emit("sendDimension",this.dimensions)
    }
    }
  }
</script>
<style lang="less">
.dimension {
  overflow:auto;
  &.el-tree {
    .el-tree-node__content{
      display: inline-block;
      min-width: 100%;
    }
    .el-tree-node__children{
      overflow: visible !important;
    }
}
}
</style>
